<template>
  <div>
    <r-search
      :searchForm="searchForm"
      :searchHandle="searchHandle"
      :searchData="searchData"
    />
    <r-search :searchHandle="searchHandleAdd" />
    <r-table
      :tableHandles="tableHandles"
      :isSelection="false"
      :isIndex="false"
      :isPagination="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="tablePage"
      :isHandle="true"
      @refresh="init()"
    >
    </r-table>
    <!--    <r-form :formRules="formRules" :formHandle="formHandle" :formData="formData" :formCols="formCols" ref="elForm" labelWidth="200px" dialogWidth="1000px" :isHandle="true" />-->
  </div>
</template>
<script>
export default {
  data() {
    return {
      // TemplateExportData
      searchHandleAdd: [
        {
          label: "ExportData",
          icon: "el-icon-download",
          type: "success",
          loading: false,
          // handle: (that) => this.handleDownload(),
          handle: async e => {
            const res = await this.apis.deviceLogExport();
            // console.log("res---", res.msg);
            location.href =
              process.env.VUE_APP_URL + "/profile/download" + res.msg;
          }
        }
      ],
      searchData: {
        deviceType: "3",
        sn: "",
        oprType: "",
        result: "",
        phone: "",
        orderNo: ""
      },
      searchForm: [
        {
          type: "input",
          prop: "sn",
          placeholder: "Device Number",
          width: 150
        },
        {
          type: "select",
          prop: "oprType",
          placeholder: "OperationsType",
          width: 150,
          options: [
            { label: "开门充电", value: "1" },
            { label: "开门取电", value: "2" }
          ]
        },
        {
          type: "select",
          prop: "result",
          placeholder: "OperationsStatus",
          width: 150,
          options: [
            { label: "Failure", value: "0" },
            { label: "Success", value: "1" }
          ]
        },
        {
          type: "input",
          prop: "phone",
          placeholder: "Phone",
          width: 150
        },
        // {
        //   type: 'input',
        //   prop: 'name',
        //   placeholder: '充取Status',
        //   width: 150
        // },
        {
          type: "input",
          prop: "orderNo",
          placeholder: "Order Nnumber",
          width: 150
        }
      ],
      searchHandle: [
        {
          label: "Search",
          type: "success",
          icon: "el-icon-search",
          handle: e => this.init()
        }
      ],

      tableHandles: [
        // {
        //   label: "ExportData",
        //   type: "primary",
        //   handle: e => this.elFormVisible()
        // }
      ],
      tableData: [],
      tableCols: [
        {
          label: "Device Number",
          prop: "sn"
        },

        {
          label: "柜门号",
          prop: "cabinetNo"
        },
        // OperationsType：0：管理员（Maintenance）开门 1：开门充电（Charging Cabinet）  2：开门取电(Charging Cabinet） 3：开门取Battery(换电柜）4：开门Battery Swap（换电柜） 5：开门ReturnBattery（换电柜）
        {
          label: "OperationsType",
          prop: "oprType",
          formatter: e =>
            e.oprType == 0
              ? "管理员（Maintenance）开门"
              : e.oprType == 1
              ? "开门充电"
              : e.oprType == 2
              ? "开门取电"
              : "--"
        },
        // 结果: 0 Failure 1Success
        {
          label: "OperationsStatus",
          prop: "result",
          itemClass: e =>
            e.result == 0 ? "danger" : e.result == 1 ? "success" : "",
          formatter: e =>
            e.result == 0 ? "Failure" : e.result == 1 ? "Success" : "--"
        },
        {
          label: "Operations人",
          prop: "userName"
        },
        // {
        //   label: '充/取Status',
        //   prop: 'giftMoney'
        // },
        {
          label: "Start Time",
          prop: "ctime"
        },
        {
          label: "End Time",
          prop: "ftime"
        },
        {
          label: "对应订单",
          prop: "orderNo"
        }
      ],
      tablePage: { limit: 10, page: 1, total: 0 }
      // formData: {
      //   name: "",
      //   money: "",
      //   giftMoney: "",
      //   status: ""
      // },
      // formCols: [
      //   { type: "input", label: "Package Name", width: 350, prop: "name" },
      //   { type: "input", label: "PackageMoney", width: 350, prop: "money", remark: '元' },
      //   { type: "input", label: "Gift Amount", width: 350, prop: "giftMoney", remark: '元' },
      //   { type: "switch", label: "上线/下线", width: 350, prop: "status" },
      // ],
      // formRules: {
      //   name: [
      //     { required: true, message: 'Please InputPackage Name', trigger: 'blur' },
      //   ],
      //   money: [
      //     { required: true, message: 'Please InputPackageMoney', trigger: 'blur' },
      //   ],
      //   giftMoney: [
      //     { required: true, message: 'Please InputPackageMoney', trigger: 'blur' },
      //   ],
      // },
      // formHandle: [
      //   {
      //     label: "Cancel",
      //     handle: e => this.elFormVisible(),
      //   },
      //   {
      //     label: "Confirm",
      //     type: "success",
      //     handle: e => this.elFormSubmit(),
      //   },
      //
      // ],
    };
  },
  components: {},
  computed: {},
  mounted() {
    if (this.$route.query.sn) {
      this.searchData.sn = this.$route.query.sn;
    }
    this.init();
  },
  methods: {
    async init() {
      let parm = {
        ...this.searchData,
        ...{
          pageNum: this.tablePage.page,
          pageSize: this.tablePage.limit
        }
      };
      let res = await this.apis.deviceLog_list(parm);
      if (res) {
        this.tableData = res.rows || [];
        this.tablePage.total = res.total;
      }
    }
    // async elFormSubmit() {
    //   this.formData.state = this.formData.status == true ? 1 : 2
    //   if (this.formData.id) {
    //     let res = await this.api.packupdate(this.formData)
    //     if (res) {
    //       this.formData.id = ''
    //       this.elFormVisible()
    //       this.init()
    //     }
    //   } else {
    //     let res = await this.api.packadd(this.formData)
    //     if (res) {
    //       this.elFormVisible()
    //       this.init()
    //     }
    //   }
    // },
    // async changestate(id) {
    //   let res = await this.api.packchange({ id })
    //   if (res) {
    //     this.init()
    //   }
    // },
    // elFormDetail(row) {
    //   console.log(row);
    //   Object.keys(this.formData).forEach(key => {
    //     this.formData[key] = row[key]
    //   })
    //
    //   this.formData.status=row['state']==1?true:false
    //   this.formData.id = row.id;
    //   // if (this.formCols[1].label == '登录密码') {
    //   //     this.formCols.splice(1, 1)
    //   // }
    //
    //   this.elFormVisible()
    // },
  }
};
</script>
<style scoped lang="scss">
.el-icon-search {
  margin-right: 10px;
}

.Tip {
  margin-left: 20px;
}
</style>
